<template>
	<div>
		<div style="background: gold;">
			<div class="my">
				<img src="../assets/img/text2.png" alt="" style="margin-right: 15px;">
				<nobr @click="modifyNew()">{{userphone}}</nobr>
				<ul class="nav nav-secondary">
					<router-link to="/collection" style="color: #000000;">
						<li id="mli" class="icon icon-star-empty"><br><br>收藏</li>
					</router-link>
					<router-link to="/commen" style="color: #000000;">
						<li id="mli" class="icon icon-file-text-o"><br><br>评价</li>
					</router-link>
					<li id="mli" class="icon icon-time"><br><br>足迹</li>
					<li id="mli" class="icon icon-columns"><br><br>红包卡券</li>
				</ul>
			</div>
		</div>
		<div id="show" v-show="showFrame">
			<input type="text" id="modify" value="" class="form-control" v-model="smodify" /><br>
			<button type="button" class="btn btn-sm" @click="modifyFrame()" style="margin-right: 15px;">修改</button>
			<button type="button" class="btn btn-sm" @click="closeFrame()">关闭</button>
		</div><br><br>
		<div class="order">
			<ul class="nav nav-secondary">
				<li style="margin-left: 12px;font-weight:bold;">我的下单</li>
				<router-link to="/orderdetail" style="color: #000000;">
					<li id="oli">查看全部下单<i class="icon icon-chevron-right"></i></li>
				</router-link>
			</ul><br>
			<ul class="nav nav-secondary">
				<router-link to="/homePage">
					<li id="omli" class="icon icon-yen"><br><br>待付款</li>
				</router-link>
				<router-link to="/">
					<li id="omli" class="icon icon-edit"><br><br>待评价</li>
				</router-link>
				<li id="omli" class="icon icon-window"><br><br>退款/售后</li>
			</ul>
		</div>
		<div class="order">
			<ul class="nav nav-secondary">
				<li style="margin-left: 12px;font-weight:bold;">我的接单</li>
				<router-link to="/orderdetail" style="color: #000000;">
					<li id="oli">查看全部接单<i class="icon icon-chevron-right"></i></li>
				</router-link>
			</ul><br>
			<ul class="nav nav-secondary">
				<router-link to="/homePage">
					<li id="omli" class="icon icon-yen"><br><br>待完成</li>
				</router-link>
				<router-link to="/">
					<li id="omli" class="icon icon-edit"><br><br>待评价</li>
				</router-link>
				<li id="omli" class="icon icon-window"><br><br>售后</li>
			</ul>
		</div>
		<div class="order1">
			<ul class="nav nav-secondary">
				<li style="margin-left: 12px;font-weight:bold;">我的钱包</li>
				<router-link to="/order1">
					<li id="oli">进入钱包&nbsp;<i class="icon icon-chevron-right"></i></li>
				</router-link>
			</ul><br>
			<ul class="nav nav-secondary">
				<li id="omli1">3.05万<br>借钱<br>
					<p style="color: gray;font-size: 12px;">大约可借</p>
				</li>
				<li id="omli1">5月<br>我的账单<p style="color: gray;font-size: 12px;">消费记录</p>
				</li>
				<li id="omli1">8张<br>月付<br>
					<p style="color: gray;font-size: 12px;">免费现金券</p>
				</li>
				<li id="omli1">180元<br>享优惠<br>
					<p style="color: gray;font-size: 12px;">随机减</p>
				</li>
			</ul>
		</div>
		<div class="order1">
			<van-grid :border="false" :column-num="3" style="margin-top: 20px;">
				<van-grid-item>
					<van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
				</van-grid-item>
				<van-grid-item>
					<van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
				</van-grid-item>
				<van-grid-item>
					<van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
				</van-grid-item>
			</van-grid>
		</div>
		<div class="order1">
			<van-grid :border="false" :column-num="3" style="margin-top: 20px;">
				<van-grid-item>
					<van-image src="https://img.yzcdn.cn/vant/custom-icon-fire.png" />
				</van-grid-item>
				<van-grid-item>
					<van-image src="https://img.yzcdn.cn/vant/custom-icon-light.png" />
				</van-grid-item>
				<van-grid-item>
					<van-image src="https://img.yzcdn.cn/vant/custom-icon-water.png" />
				</van-grid-item>
			</van-grid>
		</div>
		
		<router-link to="/" slot="right">
			<button class="btn btn-sm" @click="logout" id="but">退出登录</button>
		</router-link>
		<van-button round type="info" @click="logout" id="but"></van-button>
	</div>
</template>

<script>
	import {
		Toast
	} from 'mint-ui';
	export default {
		name: 'mylogin',
		data() {
			return {
				userphone: '',
				userpwsd: '',
				showFrame: false,
				smodify: '×××',
			}
		},
		mounted() {
			var getuserphone = JSON.parse(localStorage.getItem("key"))
			this.userphone = getuserphone.userphone
		},
		methods: {
			modifyNew() {
				this.showFrame = true;
				this.smodify = this.userphone;
			},
			modifyFrame() {
				this.userphone = this.smodify
				var getuserphone = JSON.parse(localStorage.getItem("key"))
				this.userpwsd = getuserphone.userpwsd
				Toast('修改成功')
				var obj = {
					userphone: this.smodify,
					userpwsd: this.userpwsd,
					logged: true
				};
				window.localStorage.setItem('key', JSON.stringify(obj));
				this.showFrame = false
			},
			closeFrame() {
				this.showFrame = false
			},
			logout() {
				this.$router.push({
					name: 'logout'
				});
			}
		},
	}
</script>

<style scoped>
	.my {
		display: inline-block;
		margin-top: 20px;
	}

	ul {
		margin-top: 15px;
	}

	#mli {
		margin-left: 18px;
		text-decoration: none;
		list-style: none;
		float: left;
		width: 70px;
		height: 60px;
		text-align: center;
		font-size: 15px;
	}

	.order {
		border: 1px outset;
		width: 336px;
		height: 120px;
		border-radius: 15px;
		margin-top: 10px;
		margin-left: 20px;
	}

	.order1 {
		border: 1px outset;
		width: 336px;
		height: 150px;
		border-radius: 15px;
		margin-top: 10px;
		margin-left: 20px;
	}

	#oli {
		text-decoration: none;
		list-style: none;
		float: right;
		width: 100px;
		font-size: 12px;
		color: gray;
		text-align: center;
	}

	#omli {
		margin-left: 53px;
		text-decoration: none;
		list-style: none;
		float: left;
		text-align: center;
		font-size: 14px;
		color: #8B4513;
	}

	#omli1 {
		margin-left: 26px;
		text-decoration: none;
		list-style: none;
		float: left;
		text-align: center;
		font-size: 13px;
		color: #8B4513;
	}

	#show {
		width: 230px;
		height: 120px;
		padding: 20px;
		margin-left: 76px;
		border-radius: 15px;
		background: black;
		opacity: 0.8;
		z-index: 1999;
	}

	#but {
		font-size: 16px;
		width: 200px;
		margin-left: 80px;
		border-radius: 26px;
		margin-top: 20px;
		background: gold;
	}
</style>
